<!-- 实名认证 -->
<template>
	<view class="wrap">
		<view class="topTitle">
			<text>红色青春点亮甘肃</text>
		</view>
		<!-- 未实名 -->
		<view class="formBox">
			<!-- 姓名 -->
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" label-width="150"
					:label-position="labelPosition" label="姓名" prop="name">
					<u-input :border="border" placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
				</u-form-item>

				<!-- 电话 -->
				<u-form-item :label-position="labelPosition" label="手机号码" prop="phone" label-width="150">
					<u-input :border="border" placeholder="请输入手机号码" v-model="model.phone" type="number"></u-input>
				</u-form-item>

				<!-- 类型 -->
				<u-form-item :label-position="labelPosition" label="选择类型" prop="goodsType" label-width="150">
					<u-input :border="border" type="select" :select-open="selectShow" v-model="model.goodsType"
						placeholder="请选择类型" @click="selectShow = true"></u-input>
				</u-form-item>

			</u-form>
			<view class="agreement">
				<u-checkbox v-model="model.check" active-color="#ff2424" @change="checkboxChange"></u-checkbox>
				<view class="agreement-text">
					我已阅读并同意<text @click="argeementIs">《红色青春点亮甘肃用户服务协议》</text>
				</view>
			</view>
			<button type="default" class="submitBtn" @tap="$u.throttle(submitBtn, 500)">提交</button>
			<u-action-sheet :list="actionSheetList" v-model="actionSheetShow" @click="actionSheetCallback">
			</u-action-sheet>
			<u-select v-model="selectShow" mode="mutil-column-auto" :list="list" @confirm="selectConfirm"></u-select>
		</view>

		<!-- toast -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import realName from '../../../static/common/json/realName.js'
	export default {
		data() {
			let that = this;
			return {
				selectStatus: 'close',
				wxKey: '', //wxkey
				selectType: '', //第一项选择类型
				isRealName: '', //是否实名
				token: '',
				model: {
					name: '', //姓名
					check: false,
					agreement: false,
					goodsType: '',
					phone: '', //电话
					code: '',
				},


				list: realName.data,
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						},
						{
							min: 2,
							max: 12,
							message: '姓名长度在2到12个字符',
							trigger: ['change', 'blur'],
						},
						{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.chinese(value);
							},
							message: '姓名必须为中文',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						},
						// 异步验证，用途：比如用户注册时输入完账号，后端检查账号是否已存在
						// {
						// 	trigger: ['blur'],
						// 	// 异步验证需要通过调用callback()，并且在里面抛出new Error()
						// 	// 抛出的内容为需要提示的信息，和其他方式的message属性的提示一样
						// 	asyncValidator: (rule, value, callback) => {
						// 		this.$u.post('/ebapi/public_api/index').then(res => {
						// 			// 如果验证出错，需要在callback()抛出new Error('错误提示信息')
						// 			if(res.error) {
						// 				callback(new Error('姓名重复'));
						// 			} else {
						// 				// 如果没有错误，也要执行callback()回调
						// 				callback();
						// 			}
						// 		})
						// 	},
						// }
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change', 'blur'],
						}
					],
					// 类型
					goodsType: [{
						required: true,
						message: '请选择类型',
						trigger: 'change',
					}],

				},
				pickerShow: false,
				actionSheetShow: false,
				selectShow: false,
				radioCheckWidth: 'auto',
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['message'],
			};
		},
		// 页面卸载
		onUnload() {
			uni.$off('isAgree');
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(this.list)
			// 禁用分享
			wx.hideShareMenu()
			this.token = uni.getStorageSync('token');
			this.wxKey = uni.getStorageSync('wxKey')
		},
		onShow() {
			let that = this;
			uni.$on('isAgree', function(e) {
				that.model.check = e.status;
				console.log(that.model.check)

			})

		},
		computed: {},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 表单提交
			submitBtn() {
				const that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.model.check) return this.$u.toast('请勾选协议');
						console.log('验证通过');
						// 提交表单
						uni.request({
							url: this.baseUrl + '/api/user/add',
							method: 'POST',
							header: {
								Authorization: uni.getStorageSync('token')
							},
							data: {
								blName: that.model.name,
								blPhone: that.model.phone,
								blUnit: that.model.goodsType,
								blWxKey: that.wxKey,
								blType: that.selectType
							},
							success: res => {
								that.showToast('实名认证成功', 'success')
								console.log("实名wxKey")
								console.log(this.wxKey)
								console.log(this.token)
								uni.redirectTo({
									url: '../../Home/Home?wxKey=' + this.wxKey + '&token=' +
										this.token,
								});
							
							},
							fail: (err) => {
								console.log(err)
								that.showToast(err.msg, 'error')
							}
						});
						// this.$u.post('http://192.168.3.154:8083/api/user/add', {
						// 	blName: that.model.name,
						// 	phone: that.model.phone,
						// 	blUnit: that.model.goodsType,
						// 	blWxKey: that.wxKey,
						// 	blType: that.selectType,
						// }).then(res => {
						// 	console.log(res);
						// });
					} else {
						console.log('验证失败');
					}
				});
			},
			// 点击弹出用户协议
			argeementIs() {
				this.$u.route("/pages/form/agreement/agreement");
			},
			// 点击actionSheet回调
			actionSheetCallback(index) {
				uni.hideKeyboard();
				this.model.sex = this.actionSheetList[index].text;
			},
			// 勾选版权协议
			checkboxChange(e) {
				this.model.check = e.value;
			},
			// 选择类型回调
			selectConfirm(e) {
				this.model.goodsType = '';
				e.map((val, index) => {
					this.model.goodsType += this.model.goodsType == '' ? val.label : '-' + val.label;
				})
				console.log(this.model.goodsType.split('-'))
				const selectJ = this.model.goodsType.split('-');
				if (selectJ[0] == "市州") {
					this.selectType = 0;
				} else if (selectJ[0] == "高校") {
					this.selectType = 1;
				} else {
					this.selectType = 2;
				}
			},
			// 弹出提示
			showToast(title, type, url) {
				this.$refs.uToast.show({
					title: title,
					type: type,
					url: url
				})
			},
		}
	};
</script>

<style scoped lang="scss">
	.wrap {
		background: url('https://tuanwei.yjha.com.cn/resource/realName_bg.png') no-repeat;
		background-size: 100% 100%;
		padding-top: 80px;
		min-height: 100vh;

		.topTitle {
			position: fixed;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 80px;
			line-height: 80px;
			font-size: 20px;
			font-family: '黑体';
			color: #fff;
			font-weight: bold;
			text-align: center;
		}

		.formBox {
			width: calc(100% - 30px);
			height: auto;
			overflow: hidden;
			background-color: #fff;
			border-radius: 8px;
			padding: 30px 15px;
			margin: 0 15px;

			.submitBtn {
				display: block;
				width: 100%;
				height: 42px;
				line-height: 42px;
				color: #fff;
				font-family: '黑体';
				background: url('https://tuanwei.yjha.com.cn/resource/realBtn_bg.png') no-repeat;
				background-size: 100% 100%;
				border: none;
				&::after{
					border: none;
				}
			}
		}


	}

	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			padding-left: 8rpx;
			color: #999;
			font-size: 12px;

			text {
				color: #eb2b1b;
			}
		}
		.u-select .u-line-1{
			 font-size: 14px;
		}
	}
</style>
<style>
	.u-checkbox {
		display: inline !important;
	}
	.u-select .u-line-1{
		 font-size: 14px;
	}
</style>
